<!doctype html>

<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Tiny Dashboard - A Bootstrap Dashboard Template</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Fonts CSS -->
    <!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
  </head>
  <body class="vertical  light  ">
    <div class="wrapper">
      <nav th:replace="~{comm/blank::topnav}"/>
      <aside th:replace="~{comm/blank::aside}"/>
      <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12">
              <h2 class="page-title">订单添加</h2>
              <p class="text-muted">编辑订单信息后，点击提交按钮以添加订单</p>
              <div class="card shadow mb-4">
                <div class="card-header">
                  <strong class="card-title">编辑订单</strong>
                </div>
                <div class="card-body">
                  <div class="row">

                    <div class="col-md-6">
                      <div class="form-group mb-3">
                        <label>订单号</label>
                        <input id="indentId" type="text" readonly="readonly" class="form-control" placeholder="自动生成，无需填写">
                      </div>
                      <div class="form-group mb-3">
                        <label>订单金额</label>
                        <input id="payment" type="text" class="form-control input-money">
                      </div>
                      <div class="form-group mb-3">
                        <label>邮费</label>
                        <input id="post" type="text" class="form-control input-money">
                      </div>
                      <div class="form-group mb-3">
                        <label>物流公司</label>
                        <input id="shipName" type="text" class="form-control">
                      </div>
                      <div class="form-group mb-3">
                        <label>物流单号</label>
                        <input id="shipCode" type="text" class="form-control">
                      </div>
                      <div class="form-group mb-3">
                        <label for="status">订单状态</label>
                        <select id="status" class="form-control">
                          <option value="0" selected="selected">未付款</option>
                          <option value="1">已付款</option>
                          <option value="2">未发货</option>
                          <option value="3">已发货</option>
                          <option value="4">交易成功</option>
                          <option value="5">交易关闭</option>
                          <option value="6">交易失败</option>
                        </select>
                      </div>
                      <div class="form-group mb-3">
                        <label for="payType">支付方式</label>
                        <select id="payType" class="form-control">
                          <option value="1" selected="selected">在线支付</option>
                          <option value="2">货到付款</option>
                        </select>
                      </div>
                    </div> <!-- /.col -->


                    <div class="col-md-6">
                      <div class="form-group mb-3">
                        <label>买家收件名(收件人)</label>
                        <input id="buyerName" type="text" class="form-control">
                      </div>
                      <div class="form-group mb-3">
                        <label>买家下单账户ID&nbsp;&nbsp;&nbsp;<span id="UId"></span></label>
                        <input id="userId" type="text" class="form-control" onkeyup="verifyAddIntent_UId()">
                      </div>
                      <div class="form-group mb-3">
                        <label>电话&nbsp;&nbsp;&nbsp;<span id="ph"></span></label>
                        <input id="phone" class="form-control" placeholder="13600000000" maxlength="14" onkeyup="verifyAddIntent_Phone()">
                      </div>
                      <div class="form-group mb-3">
                        <label>地址</label>
                        <input id="address" class="form-control" placeholder="广东省广州市海珠区仑头路21号">
                        <!-- 没保存提交，再变色-->
                        <span class="help-block"><small>提交前请先点击保存该地址</small></span>
                        <button class="btn-danger" style="float: right">保存地址</button>
                      </div>
                      <div class="form-group mb-3">
                        <label >订单发货时间</label>
                        <input id="consignTime1" class="form-control" type="date" name="date">
                        <input id="consignTime2" class="form-control" type="time" name="time">
                      </div>
                      <div class="form-group mb-3">
                        <label >订单关闭时间</label>
                        <input id="closeTime1" class="form-control" type="date" name="date">
                        <input id="closeTime2" class="form-control" type="time" name="time">
                      </div>
<!--                      <div class="form-group mb-3">-->
<!--                        <input type="submit" class="btn btn-info" value="提交" style="float:right;">-->
<!--                      </div>-->
                    </div>

                  </div>

                </div>
              </div>
              <!-- / .card -->



              <div class="col-md-12 mb-4">
                <div class="card shadow">
                  <div class="card-header">
                    <strong class="card-title">订单信息</strong>
                  </div>
                  <div class="card-body">
                    <div class="form-group mb-3">
                      <label>买家留言</label>
                      <input id="buyerMsg" class="form-control"></input>
                    </div>
                    <table class="table table-borderless table-striped">
                      <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Description</th>
                        <th scope="col" class="text-right">Rate</th>
                        <th scope="col" class="text-right">Hours</th>
                        <th scope="col" class="text-right">Ammout</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr>
                        <th scope="row">1</th>
                        <td> Creative Design<br>
                          <span class="small text-muted">Design responsive website with existing prototype</span>
                        </td>
                        <td class="text-right">$15.00</td>
                        <td class="text-right"><input class="text-sm-center" value="2" size="2" maxlength="3"></td>
                        <td class="text-right">$30.00</td>
                      </tr>
                      <tr>
                        <th scope="row">2</th>
                        <td> Front-End Development<br>
                          <span class="small text-muted">Markup conversion and adding JavaScript</span>
                        </td>
                        <td class="text-right">$20.00</td>
                        <td class="text-right"><input class="text-sm-center" value="5" size="2" maxlength="3"></td>
                        <td class="text-right">$100.00</td>
                      </tr>
                      <tr>
                        <th scope="row">2</th>
                        <td> Back-End Development<br>
                          <span class="small text-muted">Database intergration with model functions</span>
                        </td>
                        <td class="text-right">$25.00</td>
                        <td class="text-right"><input class="text-sm-center" value="7" size="2" maxlength="3"></td>
                        <td class="text-right">$155.00</td>
                      </tr>
                      </tbody>
                    </table>
                    <input type="button" class="btn btn-warning" value="返回" style="float:left;">
                    <input onclick="update()" type="submit" class="btn btn-info" id="submit" value="提交" style="float:right;" />

                  </div>
                </div>
              </div>



            </div> <!-- .col-12 -->
          </div> <!-- .row -->
        </div> <!-- .container-fluid -->
        <div th:replace="~{comm/blank::modal1}"/>
        <div th:replace="~{comm/blank::modal2}"/>
      </main> <!-- main -->
    </div> <!-- .wrapper -->

    <script th:src="@{/dash/js/jquery.min.js}"></script>
    <script th:src="@{/dash/js/popper.min.js}"></script>
    <script th:src="@{/dash/js/moment.min.js}"></script>
    <script th:src="@{/dash/js/bootstrap.min.js}"></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src="@{/dash/js/daterangepicker.js}"></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/apps.js}"></script>
    <script th:src='@{/dash/js/jquery.mask.min.js}'></script>
    <script th:src='@{/dash/js/select2.min.js}'></script>
    <script th:src='@{/dash/js/jquery.steps.min.js}'></script>
    <script th:src='@{/dash/js/jquery.validate.min.js}'></script>
    <script th:src='@{/dash/js/jquery.timepicker.js}'></script>
    <script th:src='@{/dash/js/dropzone.min.js}'></script>
    <script th:src='@{/dash/js/uppy.min.js}'></script>
    <script th:src='@{/dash/js/quill.min.js}'></script>
    <script th:src="@{/dash/js/AddIntentCheck.js}"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
<!--    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>-->


    <script>

      function update(){
        const indent = {
          "indentId": $('#indentId').val(),
          //未做
          "payment": $('#payment').val(),
          "paymentType": $('#payType option:selected').val(),
          "postFee": $('#post').val(),
          "status": $('#status').val(),
          "createTime": "",
          "updateTime": "",
          "paymentTime": "",
          "consignTime": $('#consignTime1').val()+' '+$('#consignTime2').val(),
          "endTime": "",
          "closeTime": $('#closeTime1').val()+' '+$('#closeTime2').val(),
          "shippingName": $('#shipName').val(),
          "shippingCode": $('#shipCode').val(),
          "userId": 99,
          "buyerMessage": $('#buyerMsg').val(),
          "buyerName": $('#buyerName').val(),
          "addressId": 20,
          "phone": $('#phone').val()
        }
        console.log(indent)

        $.ajax({
          //是否异步(执行后面js
          async: true,
          type: "post",
          url: "/indent/add",
          dataType: "text",
          contentType: 'application/json; charset=utf-8',
          data: JSON.stringify(indent),
          success: function (res) {
            console.log(res)
            alert("成功");
            window.location.href="/indent/list"
          },
          error: function (res) {
            console.log(res)
            alert("失败");
            window.location.href="/fail"
          }
        });

      }


      $('.select2').select2(
              {
                theme: 'bootstrap4',
              });
      $('.select2-multi').select2(
              {
                multiple: true,
                theme: 'bootstrap4',
              });
      $('.drgpicker').daterangepicker(
              {
                singleDatePicker: true,
                timePicker: false,
                showDropdowns: true,
                locale:
                        {
                          format: 'MM/DD/YYYY'
                        }
              });
      $('.time-input').timepicker(
              {
                'scrollDefault': 'now',
                'zindex': '9999' /* fix modal open */
              });
      /** date range picker */
      if ($('.datetimes').length)
      {
        $('.datetimes').daterangepicker(
                {
                  timePicker: true,
                  startDate: moment().startOf('hour'),
                  endDate: moment().startOf('hour').add(32, 'hour'),
                  locale:
                          {
                            format: 'M/DD hh:mm A'
                          }
                });
      }
      var start = moment().subtract(29, 'days');
      var end = moment();

      function cb(start, end)
      {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
      }
      $('#reportrange').daterangepicker(
              {
                startDate: start,
                endDate: end,
                ranges:
                        {
                          'Today': [moment(), moment()],
                          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                          'This Month': [moment().startOf('month'), moment().endOf('month')],
                          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        }
              }, cb);
      cb(start, end);
      $('.input-placeholder').mask("00/00/0000",
              {
                placeholder: "__/__/____"
              });
      $('.input-zip').mask('00000-000',
              {
                placeholder: "____-___"
              });
      $('.input-money').mask("###0.00",
              {
                reverse: true
              });
      $('.input-phoneus').mask('(000) 000-0000');
      $('.input-mixed').mask('AAA 000-S0S');
      $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
              {
                translation:
                        {
                          'Z':
                                  {
                                    pattern: /[0-9]/,
                                    optional: true
                                  }
                        },
                placeholder: "___.___.___.___"
              });
      // editor
      var editor = document.getElementById('editor');
      if (editor)
      {
        var toolbarOptions = [
          [
            {
              'font': []
            }],
          [
            {
              'header': [1, 2, 3, 4, 5, 6, false]
            }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [
            {
              'header': 1
            },
            {
              'header': 2
            }],
          [
            {
              'list': 'ordered'
            },
            {
              'list': 'bullet'
            }],
          [
            {
              'script': 'sub'
            },
            {
              'script': 'super'
            }],
          [
            {
              'indent': '-1'
            },
            {
              'indent': '+1'
            }], // outdent/indent
          [
            {
              'direction': 'rtl'
            }], // text direction
          [
            {
              'color': []
            },
            {
              'background': []
            }], // dropdown with defaults from theme
          [
            {
              'align': []
            }],
          ['clean'] // remove formatting button
        ];
        var quill = new Quill(editor,
                {
                  modules:
                          {
                            toolbar: toolbarOptions
                          },
                  theme: 'snow'
                });
      }
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function()
      {
        'use strict';
        window.addEventListener('load', function()
        {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');
          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form)
          {
            form.addEventListener('submit', function(event)
            {
              if (form.checkValidity() === false)
              {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>
    <script>
      var uptarg = document.getElementById('drag-drop-area');
      if (uptarg)
      {
        var uppy = Uppy.Core().use(Uppy.Dashboard,
                {
                  inline: true,
                  target: uptarg,
                  proudlyDisplayPoweredByUppy: false,
                  theme: 'dark',
                  width: 770,
                  height: 210,
                  plugins: ['Webcam']
                }).use(Uppy.Tus,
                {
                  endpoint: 'https://master.tus.io/files/'
                });
        uppy.on('complete', (result) =>
        {
          console.log('Upload complete! We’ve uploaded these files:', result.successful)
        });
      }
    </script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag()
      {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());
      gtag('config', 'UA-56159088-1');
    </script>
  </body>
</html>
